<template>
  <div class="list-item">
    <!-- 左侧装载图片的盒子 -->
    <div class="img-wrap">
      <img :src="item.img" :alt="item.phone_name" />
    </div>
    <div class="info-wrap">
      <h1 class="phone-name">{{ item.phone_name }}</h1>
      <p class="slogan">{{ item.slogan }}</p>
      <p class="price">￥{{ item.default_price }}</p>
      <p class="button">
        <button @click="addToCart(item, 'PLUS')">加入购物车</button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListItem",
  props: {
    item: Object,
  },
  methods: {
    /**
     * @data 一个包含商品信息的用于渲染购物车页面商品列表数组数据
     * @type 'PLUS' | 'MINUS'
     */
    addToCart(data, type) {
      this.$store.dispatch("setTotal", {
        price: Number(data.default_price),
        type,
      });

      this.$store.dispatch("setCart", {
        type,
        id: Number(data.id),
        img: data.img,
        name: data.phone_name,
        price: Number(data.default_price),
        slogan: data.slogan,
      });

      // console.log(this.$store.state);
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 1.2rem;
  border-bottom: 1px solid #ddd;
  background-color: #fff;

  .img-wrap {
    width: 1.2rem;
    height: 1.2rem;
    border-right: 1px solid #ddd;

    img {
      width: 100%;
    }
  }

  .info-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.2rem;
    padding: 0.1rem 0.1rem 0.1rem 1.3rem;
    box-sizing: border-box;

    .phone-name {
      color: #000;
      font-size: 0.16rem;
    }

    .slogan {
      margin-top: 0.15rem;
      color: #999;
      font-size: 0.12rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .price {
      margin-top: 0.15rem;
      color: #ff6704;
      font-size: 0.14rem;
    }

    .button {
      margin-top: 0.05rem;

      button {
        float: right;
        width: 0.8rem;
        height: 0.2rem;
        font-size: 0.12rem;
        border: 1px solid #ff6704;
        color: #ff6704;
        border-radius: 0.02rem;
        background-color: #fff;
      }
    }
  }
}
</style>